<template>
  <div class="y wn jc wf mt140px">
    <div class="title" v-text="fdata.name" />
    <div class="mDivider" />
    <div class="titelInfo" v-html="fdata.info" />
    <div class="wf x ww">
      <div
        v-for="item in fdata.data"
        :key="item.id"
        class="w350px h300px m5px item y ze"
        :style="'background-image:url('+$api+item.imgs[0].url+');'"
      >
        <div class="info x wn jc zb">
          <div class="name" v-text="item.name" />
          <div class="price" v-text="item.price+item.unit" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["fdata"],
  watch: {
    fdata() {
      // console.log(this.$cp(this.fdata));
    }
  },
  data() {
    return {
      data: []
    };
  },
  created() {
    // console.log(this.$cp(this.fdata));
  }
};
</script>

<style lang="less" scoped>
.title {
  box-sizing: border-box;
  height: 55px;
  font-family: "Arial Bold", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 48px;
}
.mDivider {
  width: 142px;
  height: 6px;
  background-color: rgba(215, 215, 215, 1);
  margin: 10px;
}
.titelInfo {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 38px;
  color: #a1a1a1;
  margin-bottom: 80px;
}
.item {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #333333;
  background-position: center;
  border-radius: 5px;
}
.info {
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgba(228, 228, 228, 0.4);
}
.name {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  color: #333333;
  overflow: hidden;
  height: 40px;
  width: 60%;
  margin: 5px;
}
.price {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  color: #333333;
  overflow: hidden;
  font-size: 26px;
  width: 30%;
}
</style>
